<template>
  <div class="search">
    <div class="soucon">
      <div class="sou">
        <em
          v-for="(item,index) in biao"
          :key="index"
          :class="{actione :currem == index}"
          @click="one(index)"
        >{{item.name}}</em>
      </div>
      <!-- 搜索 -->
      <div v-if="currem == 0">
        <div class="inpu">
          <img src="../assets/avert.png" alt class="img" @click="backs">
          <div>
            <input
              type="text"
              placeholder="搜索商品"
              v-model="bus"
              @focus="Xx('bus')"
              @blur="bule"
              @click="inpuDIS()"
            >
            <img
              src="../assets/X.png"
              alt
              class="Xx"
              v-show="bus.length>0&&Xxx == 'bus'"
              @touchend="remove('bus')"
            >
          </div>
          <em @click="pushT()">搜索</em>
        </div>
              <!-- 搜索历史纪录 -->
        <div class="history" v-if="sex">
            <div class="souhistory">搜索历史 <img src="../assets/dele.png" alt="" @click="Okye"></div>
            <div class="liulan">
                <em v-for="(item,index) in this.$store.state.niu" :key="index" @click="SearchGoodsListsss(item)">{{item}}</em>
            </div>
        </div>
              <!-- 搜索商品列表 -->
        <div v-if="!this.result.goodses == ''" >
          <div class="topheader" >
            <span class="Fours" v-for="(item,index) in four" :key="index" :class="{active :cunns == index}" @click="ones(item,index)"> {{item.name}}</span>
          </div>
          <div class="goodslist" v-for="(item,index) in result.goodses" :key="index">
            <img :src="item.picsUrl" alt>
            <div class="content">
              <p>{{item.goodsName}}</p>
              <span>
                <em>{{item.orderPrice}}元</em>
                <i>1提起</i>
                <img src="../assets/Page.png" alt>
              </span>
              <h6>{{item.dealerName}}</h6>
            </div>
          </div>
        </div>
              <!-- 搜索无结果 -->
        <div class="Searchunde" v-if="sbu">
              <div class="topheader" >
                <span class="Fours" v-for="(item,index) in four" :key="index" :class="{active :cunns == index}" @click="onesx(index)">{{item.name}}</span>
              </div>
              <div class="mifeng">
                  <img src="../assets/mifeng.png" alt="">
                  <p>抱歉没找到您搜索的“{{this.bus}}”</p>
              </div>
              <div class="goods">
                  <div class="liulan">
                      <span>最近浏览</span>
                  </div>
                  <div class="goodsmain" v-for="(item,index) in res" :key="index">
                      <img :src="item.picsUrl" alt="">
                      <div class="content">
                          <p>农夫山泉 饮用天然水塑膜量贩装这个名称有可能会很长很长很长恒昌</p>
                          <span>
                              <em>￥ 5.00</em>
                              <i>1提起</i>
                              <img src="../assets/Page.png" alt="">
                          </span>
                          <h6>酒便利酒水有限公司</h6>
                      </div>
                  </div>
              </div>
        </div>
              <!-- 筛选 -->
        <div class="screen" v-if="screen" >
            <div class="screen_left" @click="removeShade()"></div>
            <div class="screen_right">
              <span class="showgoods" :class="{chengColor}" @click="chengColor =! chengColor">仅显示有货</span>
              <h5 class="h5">价格区间</h5>
              <div class="price">
                <input placeholder="最低价格">
                <i>-</i>
                <input placeholder="最低价格">
              </div>
              <div class="bottom">
                <div>重置</div>
                <div @click="SearchGoodsListKKK(1,99999,0)">确认</div>
              </div>
            </div>
        </div>
      </div>
      <!-- 供应商 -->
      <div v-else>
        <div class="inpu">
          <img src="../assets/avert.png" alt class="img" @click="backs">
          <div>
            <input
              type="text"
              placeholder="搜索供应商"
              v-model="jxs"
              @focus="Xx('jxs')"
              @blur="bule"
              @click="inpuPPT()"
            >
            <img
              src="../assets/X.png"
              alt
              class="Xx"
              v-show="jxs.length>0&&jjj == 'jxs'"
              @touchend="remove('jxs')"
            >
          </div>
          <em @click="pushJ()">搜索</em>
        </div>
        <!-- 搜索供应商历史纪录 -->
        <div class="history" v-if="dis">
            <div class="souhistory">搜索历史 <img src="../assets/dele.png" alt="" @click="Okpass"></div>
            <div class="liulan">
                <em v-for="(item,index) in this.$store.state.company" :key="index" @click="SearchReleaseDealerList(item,'thirtyDaiesturnover')">{{item}}</em>
            </div>
        </div>
        <!-- 搜索供应商结果列表 -->
        <div v-if="!this.result.items == ''">
            <div class="gongGoods">
              <div class="tabbs">
                <span :class="{antion : qie == index}" v-for="(item,index) in tabb" :key="index"  @click="Qiehua(item,index)">{{item.name}}</span>
              </div>
          <div v-for="(_item,_index) in this.result.items" :key="_index">
              <div class="Company" >{{_item.dealerName}}
                <span>店铺 <img src="../assets/phone.png" alt=""></span>
              </div>
              <div class="pinpai">
                <div class="div">
                  <div class="tishi">经营品牌:</div>
                  <div class="brand">
                    <span v-for="(itemx,indexx) in _item.brands" :key="indexx">
                      <img :src="itemx.brandLogoUrl" alt="">
                      <p>{{itemx.brandName}}</p>
                    </span>
                  </div>
                </div>
              </div>
              <div class="close">
                <p>月交易额: <em>{{_item.thirtyDaiesturnover}}</em>元</p>
                <p>月买家数: <em>{{_item.thirtyDaiesBuyers}}</em>位</p>
              </div>
            </div>
          </div>
        </div>
        <div class="noResult" v-if="das">
          <img src="../assets/mifeng.png" alt="">
          <p>抱歉,没有搜索到相关商品</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
Vue.use(Dialog);
import { Toast } from 'vant';
Vue.use(Toast);
import Vue from "vue";
export default {
  data() {
    return {
      biao: [
        {
          name: "搜索"
        },
        {
          name: "经销商"
        }
      ],
      four:[
        {
          name:"默认",
          orderBy:'shelvesTime',
        },{
          name:'销量',
          orderBy:'salesVolume',
        },{
          name:'价格',
          orderBy:'orderPrice',
        },{
          name:'筛选',
          orderBy:'orderPrice',
        }
      ],
      tabb:[
        {
          name:"月成交额",
          orderBy:"thirtyDaiesturnover",
        },
        {
          name:"人气",
          orderBy:"thirtyDaiesBuyers",
        }
      ],
      currem: 0,
      cunns:0,
      qie:0,
      bus: "",
      jxs:"",
      Xxx: "",
      jjj:"",
      result:[],
      res:[],
      sex:true,
      sbu:false,
      dis:true,
      das:false,
      screen:false,
      niu: [],
      company:[],
      num: 1,
      chengColor:false,
      vbs:1,
    };
  },
  methods: {
    // 返回上一页
    backs() {
      this.$router.go(-1);
    },
    one(index) {
      this.currem = index;
      this.result = ''
    },
    // 搜索接口成功后默认/销量/价格/筛选切换&&价格排序
    ones(item,index) {
      this.cunns = index;
      if(index == 3){
        this.screen = true
      }else if(index == 2){
        this.num = this.num===1?0:1
        this.SearchGoodsList(item.orderBy, this.num)
      }else{
        this.SearchGoodsList(item.orderBy,1)
      }
      console.log(111)
    },
    Qiehua(item,index){
      this.qie = index;
      this.SearchReleaseDealerList(JSON.stringify(this.$store.state.company),item.orderBy)
    },
    onesx(index){
      this.cunns = index;
    },
    removeShade(){
      this.screen = false
      console.log(55555)
    },
    // 获取焦点
    Xx(val) {
      if(this.bus.length > 0){
        this.Xxx = val;
      }
      if(this.jxs.length > 0){
        this.jjj = val
      }
    },
    // 失去焦点
    bule() {
      if(this.bus.length > 0){
        this.Xxx = "";
      }
      if(this.jxs.length > 0){
        this.jjj = ""
      }
    },
    remove(val) {
      this[val] = "";
    },
    // 点击将搜索历史纪录保存到本地并请求搜索接口
    pushT(){
      function dedupe(array){
        return Array.from(new Set(array));
      }
        dedupe(this.$store.state.niu)
        if(this.$store.state.niu.length >= 10){
            this.niu.splice([this.niu.length-1])
            this.niu.unshift(this.bus)
        }else if(this.bus.length >0){
            this.niu.push(this.bus)
            this.SearchGoodsList("shelvesTime")
        }else{
        Toast('输入内容不能为空');
        }
        console.log(dedupe(this.$store.state.niu))
        this.$store.commit('setniu',dedupe(this.niu))
    },
    // 点击将搜索供应商历史纪录保存到本地并请求搜索供应商接口
    pushJ(){
      function dedupe(array){
        return Array.from(new Set(array));
      }
        dedupe(this.$store.state.company)
        if(this.$store.state.company.length >= 10){
            this.company.splice([this.company.length-1])
            this.company.unshift(this.jxs)
        }else if(this.jxs.length >0){
            this.company.push(this.jxs)
            this.SearchReleaseDealerList(this.jxs,'thirtyDaiesturnover')
        }else{
        Toast('输入内容不能为空');
        }
        console.log(dedupe(this.$store.state.company))
        this.$store.commit('setcompany',dedupe(this.company))
    },
    // 删除搜索历史纪录
    Okye() {
      Dialog.confirm({
        message: "是否删除历史纪录"
      })
        .then(index => {
            this.shanchu(index);
          // this.$store.state.niu
        })
        .catch(() => {
          console.log("98")
          // on cancel
        });
    },
    shanchu(index) {
      // this.$store.state.niu = ''
      if(this.$store.state.niu.length > 0){
        this.niu.splice(index)
        this.$store.commit('setniu',this.niu)
      }
    },
    // 删除搜索供应商历史纪录
    Okpass(){
      Dialog.confirm({
        message: "是否删除历史纪录"
      })
        .then(index => {
            this.shanchujxs(index);
          // this.$store.state.niu
        })
        .catch(() => {
          console.log("98")
          // on cancel
        });
    },
    shanchujxs(index) {
      // this.$store.state.niu = ''
      if(this.$store.state.company.length > 0){
        this.company.splice(index)
        this.$store.commit('setcompany',this.company)
      }
    },
    // 搜索请求成功接口/为空时请求搜索无结果接口
    SearchGoodsList(orderBy,orderWay) {
      let headers = {
        "content-type": "application/json"
      };
      if (this.$store.state.token) {
        headers = {
          "content-type": "application/json",
          token: this.$store.state.token,
          userid: this.$store.state.userInfo.id
        };
      }
      let params = {
          brandName:this.bus,
          cityId:this.$store.state.merchantInfo.cityId,
          countyId:this.$store.state.merchantInfo.districtId,
          goodsName:this.bus,
          groupStoreId:this.$store.state.storeId.id,
          maxPrice:99999,
          merchantId:this.$store.state.merchantInfo.merchantId,
          minPrice:0,
          orderBy:orderBy,
          orderWay,
          pageNum:1,
          pageSize:10,
          provId:this.$store.state.merchantInfo.provinceId,
          stationId:Number(this.$store.state.stationId),
          status:1,
          stock:1,
          storeId:this.$store.state.storeId.storeId,
          town:this.$store.state.merchantInfo.streetId,
          userId:this.$store.state.userInfo.id,
      }
      this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/searchGoodsList',{
          ...params
      },
      {
          headers,
      })
      .then( res => {
        if(res.data.status.statusCode===0){
          this.result = res.data.result
          if(this.result.goodses == null){
            this.getGoodsRecordByUserId()
          }else{
            this.sex = false
          }
        }
      })
      .catch( err=> {
      })
    },
    SearchGoodsListKKK(stock,maxPrice,minPrice) {
      let headers = {
        "content-type": "application/json"
      };
      if (this.$store.state.token) {
        headers = {
          "content-type": "application/json",
          token: this.$store.state.token,
          userid: this.$store.state.userInfo.id
        };
      }
      let params = {
          brandName:this.$store.state.niu,
          cityId:this.$store.state.merchantInfo.cityId,
          countyId:this.$store.state.merchantInfo.districtId,
          goodsName:this.$store.state.niu,
          groupStoreId:this.$store.state.storeId.id,
          maxPrice,
          merchantId:this.$store.state.merchantInfo.merchantId,
          minPrice,
          orderBy:"shelvesTime",
          orderWay:0,
          pageNum:1,
          pageSize:10,
          provId:this.$store.state.merchantInfo.provinceId,
          stationId:Number(this.$store.state.stationId),
          status:1,
          stock,
          storeId:this.$store.state.storeId.storeId,
          town:this.$store.state.merchantInfo.streetId,
          userId:this.$store.state.userInfo.id,
      }
      this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/searchGoodsList',{
          ...params
      },
      {
          headers,
      })
      .then( res => {
        if(res.data.status.statusCode===0){
          this.result = res.data.result
          this.screen =false
        }
      })
      .catch( err=> {
      })
    },
    // 点击搜索历史纪录内容跳转接口
    SearchGoodsListsss(item) {
      this.bus = item;
      let headers = {
        "content-type": "application/json"
      };
      if (this.$store.state.token) {
        headers = {
          "content-type": "application/json",
          token: this.$store.state.token,
          userid: this.$store.state.userInfo.id
        };
      }
      let params = {
          brandName:item,
          cityId:this.$store.state.merchantInfo.cityId,
          countyId:this.$store.state.merchantInfo.districtId,
          goodsName:item,
          groupStoreId:this.$store.state.storeId.id,
          maxPrice:99999,
          merchantId:this.$store.state.merchantInfo.merchantId,
          minPrice:0,
          orderBy:"shelvesTime",
          orderWay:0,
          pageNum:1,
          pageSize:10,
          provId:this.$store.state.merchantInfo.provinceId,
          stationId:Number(this.$store.state.stationId),
          status:1,
          stock:1,
          storeId:this.$store.state.storeId.storeId,
          town:this.$store.state.merchantInfo.streetId,
          userId:this.$store.state.userInfo.id,
      }
      this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/searchGoodsList',{
          ...params
      },
      {
          headers,
      })
      .then( res => {
        if(res.data.status.statusCode===0){
          this.result = res.data.result
          if(this.result.goodses == null){
            this.getGoodsRecordByUserId()
          }else{
            this.sex = false
          }
        }
      })
      .catch( err=> {
      })
    },
    // 搜索无结果接口请求
    getGoodsRecordByUserId(){
      let headers = {
        "content-type": "application/json"
      };
      if (this.$store.state.token) {
        headers = {
          "content-type": "application/json",
          token: this.$store.state.token,
          userid: this.$store.state.userInfo.id
        };
      }
      let params = {
          dealerId:this.$store.state.merchantInfo.id,
          groupStoreId:this.$store.state.storeId.storeId,
          merchantId:this.$store.state.merchantInfo.merchantId,
          pageNum:1,
          pageSize:10,
          shopId:this.$store.state.merchantInfo.groupId,
          stationId:this.$store.state.stationId,
          userId:this.$store.state.userInfo.id,
      }
      this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/getGoodsRecordByUserId',{
          ...params,
      },
      {
          headers,
      })
      .then( res => {
        if(res.data.status.statusCode===0){
          this.res = res.data.result
          this.sbu = true
          this.sex = false
          console.log(res)
          // this.$store.commit('setres',this.res)
        }
      })
      .catch( err=> {
          console.log(err)
      })
    },
    // 搜索供应商请求成功接口//点击搜索供应商历史内容跳转接口
    SearchReleaseDealerList(item,orderBy){
      let headers = {
        "content-type": "application/json"
      };
      if (this.$store.state.token) {
        headers = {
          "content-type": "application/json",
          token: this.$store.state.token,
          userid: this.$store.state.userInfo.id
        };
      }
      let params = {
        dealerName:item,
        orderBy,
        pageNum:1,
        pageSize:10,
        stationId:this.$store.state.stationId,
      }
      this.$http.post("https://web-gateway.newbeescm.com/b2b-app-web/searchReleaseDealerList",{...params},
        {
          headers
        })
        .then( res=>{
          if(res.data.status.statusCode===0){
            this.result = res.data.result
            if(this.result.items == ''){
              this.SearchReleaseDealerListid()
            }else{
              this.das = false
              this.dis = false
            }
          }
        })
        .catch(err =>{
          console.log(err)
        })
    },
    // 搜索供应商无结果接口
    SearchReleaseDealerListid(){
      let headers = {
        "content-type": "application/json"
      };
      if (this.$store.state.token) {
        headers = {
          "content-type": "application/json",
          token: this.$store.state.token,
          userid: this.$store.state.userInfo.id
        };
      }
      this.$http.get('https://web-gateway.newbeescm.com/b2b-app-web/getDealerRecordByUserId/'+this.$store.state.userInfo.id,
        {
          userId:this.$store.state.userInfo.id,
           headers
        },
      )
      .then(res =>{
        console.log(res)
        this.dis = false;
        this.das = true
      })
      .catch(err => {
        console.log(err)
      })
    },
    // 点击搜索框时隐藏历史纪录&&清除搜索列表数据
    inpuDIS(){
      if(!this.$store.state.niu == ''){
        this.result = ''
        this.res = ''
        this.sbu = false
        this.sex = true
      }
    },
    // 点击搜索框时隐藏历史纪录&&清除搜索列表数据
    inpuPPT(){
      if(!this.$store.state.company == ''){
        this.result = ''
        this.das = false
        this.dis = true
      }
    }
  },
};
</script>
<style scoped lang="scss">
em {
  font-style: normal;
}
input{
  margin: 0;
  padding: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
i {
  font-style: normal;
}
.search {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f2f1f6;
  height: 100%;
  width: 100%;
  .soucon {
    .sou {
      padding: 0.14rem 0 0.05rem 0.49rem;
      background: #fff;
      font-size: 0.14rem;
      em {
        font-style: normal;
        &:nth-child(2) {
          padding-left: 0.14rem;
        }
      }
    }
  }
  .inpu {
    background: #fff;
    padding: 0.11rem 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    .img {
      width: 0.08rem;
      height: 0.16rem;
    }
    input {
      width: 2.27rem;
      border: 1px solid #ccc;
      border-radius: 6px;
      padding: 0.05rem 0 0.05rem 0.35rem;
      background: url("../assets/search.png") no-repeat;
      background-size: 6%;
      background-position: 0.1rem;
      font-size: 0.12rem;
      outline: none;
      &::placeholder {
        color: #999;
        font-size: 0.12rem;
      }
    }
    .Xx {
      width: 0.14rem;
      height: 0.14rem;
      position: absolute;
      top: 0.15rem;
      right: 0.75rem;
      z-index: 9999;
    }
    em {
      color: #dd3333;
    }
  }
}
.history {
  background: #fff;
  .souhistory {
    display: flex;
    justify-content: space-between;
    padding: 0.19rem 0.14rem 0.14rem 0.14rem;
    font-size: 0.14rem;
  }
  img {
    height: 0.16rem;
    width: 0.16rem;
  }
  .liulan {
    padding: 0 0.14rem 0.14rem 0.14rem;
    width: 100%;
    box-sizing: border-box;
    line-height: 0.3rem;
    em {
      font-size: 0.12rem;
      color: #666;
      background: #f2f1f6;
      padding: 0.04rem 0.1rem;
      margin-right: 0.16rem;
      border-radius: 0.08rem;
    }
  }
}
.actione {
  color: #dd3333;
}
.Searchunde {
  .mifeng {
    padding: 0.8rem 0;
    text-align: center;
    img {
      width: 1.34rem;
      height: 0.74rem;
      margin-bottom: 0.21rem;
    }
    p {
      font-size: 0.14rem;
      color: #999;
    }
  }
  .goods {
    .liulan {
      width: 100%;
      height: 0.4rem;
      background: #fff;
      position: relative;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        background: #ccc;
        width: 100%;
        height: 1px;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
      }
      span {
        display: flex;
        align-items: center;
        font-size: 0.14rem;
        position: relative;
        padding-left: 0.18rem;
        &::after {
          content: "";
          position: absolute;
          bottom: -0.05rem;
          left: 0;
          background: #dd3333;
          width: 0.05rem;
          height: 100%;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
        }
      }
    }
    .goodsmain {
      padding: 0.07rem 0.14rem;
      background: #fff;
      display: flex;
      img {
        width: 1rem;
        height: 1rem;
      }
      .content {
        flex: 1;
        padding-left: 0.09rem;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          background: #eee;
          width: 100%;
          height: 1px;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
        }
        p {
          font-size: 0.14rem;
          color: #333;
        }
        span {
          display: block;
          padding-top: 0.19rem;
          position: relative;
          em {
            color: #dd3333;
          }
          i {
            padding-left: 0.12rem;
            color: #666;
            font-size: 0.12rem;
          }
          img {
            position: absolute;
            top: 0.25rem;
            right: 0;
            height: 0.18rem;
            width: 0.18rem;
          }
        }
      }
    }
  }
}
.topheader{
  height: 0.44rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;
  position: relative;
      &::after {
      content: "";
      position: absolute;
      bottom: 0;
      background: #eee;
      width: 100%;
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }
  .Fours{
    font-size: 0.14rem;
  }
}
.goodslist {
  padding: 0.07rem 0.14rem;
  background: #fff;
  display: flex;
  img {
    width: 1rem;
    height: 1rem;
  }
  .content {
    flex: 1;
    padding-left: 0.09rem;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      background: #eee;
      width: 100%;
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }
    p {
      font-size: 0.14rem;
      color: #333;
    }
    span {
      display: block;
      padding-top: 0.19rem;
      position: relative;
      em {
        color: #dd3333;
      }
      i {
        padding-left: 0.12rem;
        color: #666;
        font-size: 0.12rem;
      }
      img {
        position: absolute;
        top: 0.25rem;
        right: 0;
        height: 0.18rem;
        width: 0.18rem;
      }
    }
  }
}
.active{
  color:#dd3333; 
}
.screen{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns:  0.5rem auto;
  .screen_left{
    background: #333;
    opacity: .8;
  }
  .screen_right{
    background: #fff;
    padding: 0.5rem  0;
    .showgoods{
      padding: 0.06rem 0.5rem;
      margin-left: 0.14rem;
      margin-top: 0.5rem;
      font-size: 0.14rem;
      background: #e2e2e2;
      color: #666;
    }
    .price{
      display: flex;
      justify-content: space-between;
      input{
        font-size: 0.14rem;
        width: 1rem;
        padding: 0.05rem 0.1rem;
        text-align: center;
        &:nth-child(1){
          margin-left: 0.14rem;
        }
        &:nth-child(3){
          margin-right: 0.14rem;
        }
        &::placeholder{
          text-align: center;
          font-size: 0.14rem; 
        }
      }
      i{
        padding: 0 0.1rem;
      }
    }
    .h5{
      margin: 0.3rem 0;
      margin-left: 0.14rem;
    }
    .chengColor{
      background: #fff;
      color: #dd3333;
      border: 1px solid red;
    }
    .bottom{
      width: 100%;
      position: absolute;
      bottom: 0;
      display: grid;
      grid-template-columns:  1.65rem 1.65rem;
      div{
        padding:0.1rem 0;
        text-align: center;
        &:nth-child(1){
          background: #fff;
          color: #333;
        }
        &:nth-child(2){
          background: #dd3333;
          color: #fff;
        }
      }
    }
  }
}
.gongGoods{
  .tabbs{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.14rem 0;
    background: #fff;
    font-size: 0.14rem;
    position: relative;
      &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            background: #ccc;
            width: 100%;
            height: 1px;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
      }
    .antion{
      color: #dd3333;
      position: relative;
      &::after {
            content: "";
            position: absolute;
            bottom: -0.12rem;
            left: 0;
            background: #dd3333;
            width: 100%;
            height: 1px;
            -webkit-transform: scaleY(2);
            transform: scaleY(2);
      }
    }
  }
  .Company{
    padding: 0.16rem 0.14rem;
    background: #fff;
    display: flex;
    justify-content: space-between;
    font-size: 0.14rem;
    font-weight: 700;
    position: relative;
    &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            background: #ccc;
            width: 100%;
            height: 1px;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
      }
    span{
      img{
        height: 0.15rem;
        width: 0.15rem;
        padding-left: 0.14rem;
      }
    }
  }
  .pinpai{
    padding-top: 0.15rem;
    background: #fff;
    .div{
      display: flex;
      padding:0 0.14rem;
      background: #FAFAFA;
      .tishi{
        display: flex;
        align-items: center;
        font-size: 0.12rem;
      }
      .brand{
        flex:1;
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
        overflow: scroll;
        width: 100%;
        margin-left: 0.1rem;
        padding:0.1rem 0 0.1rem 0;
        span{
          padding-right: 0.1rem;
          img{
            width: 0.35rem;
            height: 0.35rem;
            padding: 0.1rem;
            background: #fff;
          }
          p{
            text-align: center;
            font-size: 0.12rem;
            color: #000;
          }
        }
      }
    }
  }
  .close{
        background: #fff; 
        padding: 0 0.14rem;
        p{
          padding: 0.1rem 0;
          font-size: 0.12rem;
          color: #666;
          em{
            padding-left: 0.1rem;
            color: #333;
          }
        }
      }
}
.noResult{
  text-align: center;
  img{
    width: 1.34rem;
    height: 0.74rem;
    padding:0.3rem;
  }
  p{
    color: #999;
    font-size: 0.14rem;
  }
}
</style>
